import React,{Component} from 'react';
import {connect} from 'react-redux';
import {hashHistory} from 'react-router';
import {registerAuth} from './../action/auth';
import { Notification } from 'element-react';
import axios from 'axios'

class RegisterContext extends Component{
    state={
        name:'',
        password:''
    }
    nameCheck(){
        axios({
            method:'post',
            url:'http://localhost:3000/users/login',
            data:this.state
          }).then(res=>{
            console.log(res)
            if(res.data.length>0){
                this.props.registerAuth(false);
                Notification.error({
                    title: '错误',
                    message: '该用户名已存在，请更换用户名！'
                });
            }else{
                this.props.registerAuth(true);
                Notification({
                    title: '该用户名可用',
                    type: 'success'
                });
            }
            
        })
    }
    handleChange(e) {
        this.setState({name: e.target.value});
    }
    handleChangePass(e){
        this.setState({password: e.target.value});
    }
    handleSubmit = () => {
        const {auth} = this.props;
        console.log(this.state)
        if (this.state.name!==''&&this.state.password!=='') {
            if(auth.regAuth){
                axios({
                    method:'post',
                    url:'http://localhost:3000/users/data',
                    data:this.state
                  }).then(res=>{
                    console.log(res)
                    this.props.registerAuth(false);
                    Notification({
                        title: '注册成功',
                        message: '去登录吧！',
                        type: 'success'
                    });
                    hashHistory.push('/login');
                })
            }else{
                Notification.error({
                    title: '错误',
                    message: '该用户名已存在，请更换用户名！'
                });
            }
            
        }else{
            Notification.error({
                title: '错误',
                message: '用户名或密码不能为空！',
                duration:1000
            });
        }
    }

    render() { 
        return (
            <form className="form-signin" onSubmit={this.handleSubmit} style={{width:'400px',height:'350px',margin:'70px auto'}}>
                <h1 style={{textAlign:'center'}}>用  户  注  册</h1><br/>
                <h4 style={{textAlign:'center',color:'red'}}>{this.state.warning}</h4>
                <label htmlFor="username">用户名：</label>
                <input type="text" value={this.state.name} onChange={this.handleChange.bind(this)} onBlur={this.nameCheck.bind(this)} className="form-control" placeholder="请输入用户名" />
                <br/>
                <label htmlFor="password">密码：</label>
                <input type="password" value={this.state.password} onChange={this.handleChangePass.bind(this)} className="form-control" placeholder="请输入密码"/>
                <br/>
                <input className="btn btn-lg btn-success btn-block" type="submit" value="注   册" />
            </form>

        )
    }
}

const getValue = (state)=>{
    console.log(state)
    return {
        auth:state.auth
    }
}

const Register = connect(getValue , {registerAuth})(RegisterContext);

export default Register;